<template>
  <div class="topic" :class="act ? 'act' : 'act-no'">
    <div>
      <el-tag class="biao">多选题</el-tag>
    </div>
    <div class="del" @click="remove" v-if="isremove">
      <i class="el-icon-delete"></i>
    </div>

    <div class="title">
      <h2>{{ idx + 1 }}</h2>
      <inputTi
        :isTitle="true"
        :idx="idx"
        :inputVal="question.title"
        :placeholder="question.questionTypeName"
        :fileList="question.titimgs"
        @changeImg="titimgChange"
        @input="titleChange"
      ></inputTi>
    </div>
    <div class="content">
      <div v-for="(op, i) in question.options" :key="i">
        <el-checkbox
          v-model="op.isanswer"
          class="contentItem"
          @change="(checked) => isanswerChange(checked, i)"
        >
          <div class="box">
            <inputTi
              :idx="i"
              :inputVal="op.title"
              :fileList="[op.filepath]"
              @changeImg="opimgChange"
              @input="optionChange"
            ></inputTi>
            <i
              @click="close(i)"
              style="cursor: pointer"
              class="el-icon-close"
              v-if="act"
            ></i>
          </div>
        </el-checkbox>
      </div>
    </div>
    <div class="bonttom" v-if="act">
      <el-link type="primary" @click="add">
        <i class="el-icon-plus"></i> 添加单个选项</el-link
      >
      <!-- <el-link type="primary"><i class="el-icon-edit"></i> 批量编辑选项</el-link> -->
    </div>
  </div>
</template>

<script>
import inputTi from "./inputTi";

export default {
  components: {
    inputTi,
  },

  props: {
    item: {
      type: Object,
      default: () => {},
    },
    act: {
      type: Boolean,
    },
    idx: {
      type: Number,
    },
    isremove: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      question: this.item,
      answer: [0],
      optionObj: {
        id: "",
        title: "",
        filetype: "",
        filepath: "",
        isanswer: false,
        myanswer: false,
      },
    };
  },

  computed: {},
  watch: {
    item() {
      this.question = this.item;
    },
    act(val) {},
    idx() {},
  },
  created() {
    console.log("multiple", this.question);
  },
  mounted() {},
  methods: {
    // 正确答案切换
    isanswerChange(value, idx) {
      this.question.options[idx].isanswer = value;

      this.upParentQuestion();
    },
    //题目 变更
    titleChange(v) {
      this.question.title = v;
      this.upParentQuestion();
    },
    titimgChange(fileList) {
      this.question.titimgs = fileList;
      this.upParentQuestion();
    },
    //选项 变更
    optionChange(i, v) {
      // this.question.options[i] = v;
      this.question.options[i].title = v;
      this.upParentQuestion();
    },
    opimgChange(i, fileUrl) {
      // this.question.opimgs[i] = fileUrl;
      this.question.options[i].filepath = fileUrl;
      this.upParentQuestion();
    },
    // 变更父组件对象
    upParentQuestion() {
      this.$emit("change", this.idx, this.question);
      this.$forceUpdate();
    },
    // 添加选项
    add() {
      var nowid = this.item.options.length + 1;
      var _optionObj = Object.assign({}, this.optionObj);
      this.$set(_optionObj, "id", nowid);
      this.$set(_optionObj, "title", "选项" + nowid);
      this.$set(_optionObj, "isanswer", false);
      this.$set(_optionObj, "myanswer", false);
      this.question.options.push(_optionObj);
      // this.question.options.push("选项" + nowid);
      // this.question.opimgs.push("");
    },
    // 删除选项
    close(index) {
      this.question.options.splice(index, 1);
      // this.question.opimgs.splice(index, 1);
    },
    // 移除试题
    remove() {
      this.$emit("remove", this.idx);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  h2 {
    width: 50px;
    line-height: 30px;
    text-align: center;
  }

  width: 437px;
  // width: 70%;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  // flex-wrap: wrap;
}

.biao {
  position: absolute;
  top: 20px;
  right: 120px;
}

.act-no {
  border: 1px solid #f0f0f0 !important;
}

.act {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2) !important;
  // padding: 20px 0 17px;
  border-left: 3px solid #3089dc !important;
}

.topic {
  // height: 200px;
  position: relative;
  transition: 0.1s all;
  padding: 20px;

  .del {
    position: absolute;
    top: 30px;
    right: 40px;
    display: none;
    font-size: 20px;
    cursor: pointer;
  }
}

.topic:hover {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08);

  .del {
    display: block;
  }
}

.content {
  width: 82%;
  // margin-top: 20px;
  margin-left: 40px;

  .contentItem {
    margin-top: 20px;
    width: 100%;
    display: flex;

    // justify-content: space-between;
    align-items: center;
    // .input{
    //   width: 90%;

    // }
    .box {
      width: 520px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    i {
      // margin-left: 30px;
      // float: right;
      font-size: 18px;
      display: inline-block;
      color: #666;
    }
  }
}

.input {
  width: 427px;
}

.bonttom {
  height: 40px;
  margin-top: 10px;
  margin-left: 40px;
  width: 35%;
  display: flex;
  justify-content: space-between;
}
</style>
